<template>
	<view class="column with-100">
    <view class="top-box">
      <view class="logo-wrap">
        <image :src="$mConfig.imageUrl + '/logo.png'" mode="widthFix" class="logo"></image>
        <image :src="$mConfig.imageUrl + '/image/xq-word.png'" mode="widthFix" class="word-logo"></image>
      </view>
    </view>
    	<view class="list"  >
          <view class="li" v-for="(li, list_i) in severList"  @tap="toPage(li,list_i)"  hover-class="hover" :key="li.name">
            <view class="text">{{ li.name }}</view>
            <text class="yzb yzb-next icon-next" v-if="li.right"></text>
          </view>
		</view>
		<view class="bottom">
      <view>@XIAOQIZHIPIN2024（china）</view>
      <view>中国直聘专家</view>
    </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mark: 1,
			title: '',
			aboutData: [],
      helpDetail: '',
      severList:[
        { name: '公司介绍', show: true, right: true, icon: 'addr.png', url: this.$mRoutesConfig.aboutUs },
       { name: '用户协议', show: true, right: true, icon: 'mingxi.png',  url: this.$mRoutesConfig.terms },
       { name: '隐私政策', show: true, right: true, icon: 'choujiang.png', url: this.$mRoutesConfig.privacy },
        { name: '版本更新', show: true, right: true, icon: 'addr.png',url: this.$mRoutesConfig.aboutUs },
      ]
		};
	},

	onLoad(option) {
		console.log(option);
		if (option.type == 1) {
			this.title = '用户协议';
			this.getHelpDetail();
			this.mark = 1;
		} else {
			this.title = '关于我们';
			this.getAbouts();
			this.mark=2;
		}
		uni.setNavigationBarTitle({
			title: this.title
		});
	},

	methods: {
		// 获取关于我们
		async getAbouts(){
			this.aboutData = await this.$apis.getAboutUs();
			console.log(this.aboutData)
		},
		// 获取用户协议
		async getHelpDetail(){
			this.helpDetail = await this.$apis.getHelpDetail({categoryId:1});
    },
    	//用户点击列表项
		toPage(list_i, li_i) {
			this.$mRouter.push({
				route:list_i.url,
				query: {
					id: 1
				}
			});
		}
	}
};
</script>
<style>
page{
  background: #F5F5FC;
}
</style>
<style lang="scss">
.top-box{
  background: #fff;
  padding: 90rpx 0 100rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  .logo{
    width: 140rpx;
    height: 132rpx;
  }
  .word-logo{
    width: 228rpx;
    margin-top: 38rpx;
  }
}
.list {
  width: 100%;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
	.li {
		height: 100upx;
		padding: 0 2%;
		border-bottom: solid 1upx#F9F9F9;
		display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
		&:last-child {
			border-bottom: 0;
		}
		.to {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
		}
		.icon-next {
			font-size:40rpx;
			color:#333;
		}
	}
}
.bottom{
  position: fixed;
  bottom: 100rpx;
  color:#333;
  font-size: 26rpx;
  width: 100%;
  text-align: center;
  view{
    margin-top: 22rpx;
  }
}
</style>
